<template>

    <component :is="currentComponent" v-on:changeItem="handleChangeTab" :currentItem="currentItem"
      :currentType="currentType" ref="componentRef" />

</template>

<script setup lang="ts">
import { ref, computed, markRaw } from 'vue';
import List from './components/List.vue';
import AddEdit from './components/AddEdit.vue';

interface CurrentItem {
  rowData: any;
  tableData: Array<any>;
}

const componentList = [
  { name: '主页表格', com: markRaw(List) },
  { name: '新增修改查看模块', com: markRaw(AddEdit) }
];

const componentRef = ref<InstanceType<typeof AddEdit> | null>(null);
const currentIndex = ref(0);

const currentItem = ref<CurrentItem | null>(null);
const currentType = ref<string | null>(null);

const currentComponent = computed(() => componentList[currentIndex.value].com);

const handleChangeTab = (tab: number, item?: CurrentItem, type?: string) => {
  currentIndex.value = tab;
  currentItem.value = item || null;
  currentType.value = type || null;
};
</script>